<template>
    <div class="time-select">
        <div class="time-range">
            <p @click="openCalendar">{{constantTime}}</p>
        </div>
        <transition name="slide-fade">
            <div class="time-choose-calendar" v-show="isActive">
                <div class="arrow"></div>
                <div class="content">
                    <div class="select-content">
                        <a-select v-model="selectedDate.firstYear" @change='handleFirstYear'>
                            <a-select-option v-for="item in years" :value="item" :key="item">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="selectedDate.firstMonth" @change='handleFirstMonth'>
                            <a-select-option v-for="item in months" :value="item" :key="item"
                                             :disabled="beforeDaysToday && parseInt(selectedDate.firstYear) === moment().get('year') &&
                                              parseInt(item) < moment().get('month') + 1">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="selectedDate.firstDay" @change='handleFirstDay'>
                            <a-select-option v-for="item in firstDays" :value="item" :key="item"
                                             :disabled="beforeDaysToday && parseInt(selectedDate.firstYear) === moment().get('year') &&
                                             parseInt(selectedDate.firstMonth) === moment().get('month') + 1 &&
                                            parseInt(item) < moment().get('date')">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <div>- -</div>
                        <a-select v-model="selectedDate.lastYear" @change='handleLastYear'>
                            <a-select-option v-for="item in years" :value="item" :key="item"
                                             :disabled="parseInt(item) < parseInt(selectedDate.firstYear)">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="selectedDate.lastMonth" @change='handleLastMonth'>
                            <a-select-option v-for="item in months" :value="item" :key="item"
                                             :disabled="parseInt(selectedDate.lastYear) === parseInt( selectedDate.firstYear)
                                 && parseInt(item) < parseInt(selectedDate.firstMonth)">
                                {{item}}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="selectedDate.lastDay" @change='handleLastDay'>
                            <a-select-option v-for="item in secondDays" :value="item" :key="item"
                                             :disabled="parseInt(selectedDate.lastYear) === parseInt( selectedDate.firstYear)
                                 && parseInt(selectedDate.lastMonth) === parseInt(selectedDate.firstMonth)
                                             && parseInt(item) < parseInt(selectedDate.firstDay)">
                                {{item}}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="clear">
                        <a-button type="primary" @click="selectDate">确定</a-button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: "dayRange",
        props: ['constantTime'],
        data() {
            return {
                isActive: false,
                time_range:'',
                years: [],
                months: [],
                selectedDate: {
                    firstYear: moment().format('Y年'),
                    firstMonth: moment().format('MM月'),
                    firstDay: moment().format('DD日'),
                    lastYear: moment().format('Y年'),
                    lastMonth: moment().format('MM月'),
                    lastDay: moment().format('DD日'),
                },
                beforeDaysToday: false //是否限制今天以前的时间
            }
        },
        created() {
            this.years = this.getYeas();
            this.months = this.getMonths();
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive
                }
            },
            firstDays() {
                let length = moment(this.selectedDate.firstYear+this.selectedDate.firstMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                return this.getDaysArr(length);
            },
            secondDays() {
                let length = moment(this.selectedDate.lastYear+this.selectedDate.lastMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                return this.getDaysArr(length);
            }
        },
        watch: {
            constantTime: {
                handler(newValue, oldValue) {
                    // console.log(newValue, oldValue)
                    if(!oldValue) {
                        this.initDate();
                    }
                },
                deep: true
            }
        },
        methods: {
            moment,
            initDate() {
                if(this.constantTime) {
                    this.selectedDate = {
                        firstYear: this.constantTime.substring(0,5),
                        firstMonth: this.constantTime.substring(5,8),
                        firstDay: this.constantTime.substring(8,11),
                        lastYear: this.constantTime.substring(12,17),
                        lastMonth: this.constantTime.substring(17,20),
                        lastDay: this.constantTime.substring(20,23),
                    }
                }
            },
            openCalendar() {
                this.isActive = !this.isActive
            },
            getYeas() {
                let years = [];
                let currentYear = parseInt(moment().format('Y'));
                for (let i = 0; i < 5; i++) {
                    years.push(currentYear + i)
                }
                years.reverse();
                return years.map(function (item) {
                    return item += '年'
                });
            },
            getMonths() {
                let months = [];
                for (let i = 1; i <= 12; i++) {
                    if (i < 10) {
                        i = '0' + i;
                    }
                    months.push(i)
                }
                return months.map(function (item) {
                    return item += '月'
                });
            },
            handleFirstYear(value) {
                this.selectedDate.firstYear = value;
                if (value > this.selectedDate.lastYear) {
                    this.selectedDate.lastYear = value;
                }
                if (value === this.selectedDate.lastYear
                    && this.selectedDate.firstMonth > this.selectedDate.lastMonth) {
                    this.selectedDate.lastMonth = this.selectedDate.firstMonth
                }
                if (value === this.selectedDate.lastYear
                    && this.selectedDate.firstMonth === this.selectedDate.lastMonth
                    && this.selectedDate.lastDay < this.selectedDate.firstDay) {
                    this.selectedDate.lastDay = this.selectedDate.firstDay
                }
                if (parseInt(this.selectedDate.firstYear) === moment().get('year')
                    && parseInt(this.selectedDate.firstMonth) < moment().get('month') + 1) {
                    this.selectedDate.firstMonth = (moment().get('month') + 1)+'月';
                }
                if (parseInt(this.selectedDate.firstYear) === moment().get('year')
                    && parseInt(this.selectedDate.firstMonth) === moment().get('month') + 1
                    && parseInt(this.selectedDate.firstDay) < moment().get('date')) {
                    this.selectedDate.firstDay = moment().get('date')+'日';
                }
                let last = moment(this.selectedDate.firstYear+this.selectedDate.firstMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                if (parseInt(this.selectedDate.firstDay) > last ) {
                    this.selectedDate.firstDay = last+'日'
                }

                let next = moment(this.selectedDate.lastYear+this.selectedDate.lastMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                if (parseInt(this.selectedDate.lastDay) > next) {
                    this.selectedDate.lastDay = next+'日'
                }
            },
            handleFirstMonth(value) {
                this.selectedDate.firstMonth = value;
                if (this.selectedDate.lastYear === this.selectedDate.firstYear
                    && value > this.selectedDate.lastMonth) {
                    this.selectedDate.lastMonth = value;
                }
                if (this.selectedDate.lastYear === this.selectedDate.firstYear
                    && value === this.selectedDate.lastMonth
                    && this.selectedDate.firstDay > this.selectedDate.lastDay) {
                    this.selectedDate.lastDay = this.selectedDate.firstDay;
                }
                if (parseInt(this.selectedDate.firstYear) === moment().get('year')
                    && parseInt(this.selectedDate.firstMonth) === moment().get('month') + 1
                    && parseInt(this.selectedDate.firstDay) < moment().get('date')) {
                    this.selectedDate.firstDay = moment().get('date')+'日';
                }
                let last = moment(this.selectedDate.firstYear+this.selectedDate.firstMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                if (parseInt(this.selectedDate.firstDay) > last ) {
                    this.selectedDate.firstDay = last+'日'
                }

                let next = moment(this.selectedDate.lastYear+this.selectedDate.lastMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                if (parseInt(this.selectedDate.lastDay) > next) {
                    this.selectedDate.lastDay = next+'日'
                }
            },
            handleFirstDay(value){
                this.selectedDate.firstDay = value;
                if (this.selectedDate.lastYear === this.selectedDate.firstYear
                    && this.selectedDate.firstMonth === this.selectedDate.lastMonth
                    && value > this.selectedDate.lastDay) {
                    this.selectedDate.lastDay = value;
                }
            },
            handleLastYear(value) {
                this.selectedDate.lastYear = value;
                if (value === this.selectedDate.firstYear
                    && this.selectedDate.firstMonth > this.selectedDate.lastMonth) {
                    this.selectedDate.lastMonth = this.selectedDate.firstMonth;
                }

                if (parseInt(this.selectedDate.lastYear) === moment().get('year')
                    && parseInt(this.selectedDate.lastMonth) < moment().get('month') + 1) {
                    this.selectedDate.lastMonth = (moment().get('month') + 1)+'月';
                }
                if (parseInt(this.selectedDate.lastYear) === moment().get('year')
                    && parseInt(this.selectedDate.lastMonth) === moment().get('month') + 1
                    && parseInt(this.selectedDate.lastDay) < moment().get('date')) {
                    this.selectedDate.lastDay = moment().get('date')+'日';
                }
                let last = moment(this.selectedDate.lastYear+this.selectedDate.lastMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                if (parseInt(this.selectedDate.lastDay) > last) {
                    this.selectedDate.lastDay = last+'日'
                }
            },
            handleLastMonth(value) {
                this.selectedDate.lastMonth = value;
                if (parseInt(this.selectedDate.lastYear) === moment().get('year')
                    && parseInt(this.selectedDate.lastMonth) === moment().get('month') + 1
                    && parseInt(this.selectedDate.lastDay) < moment().get('date')) {
                    this.selectedDate.lastDay = moment().get('date')+'日';
                }
                let last = moment(this.selectedDate.lastYear+this.selectedDate.lastMonth+'01日', 'YYYY年MM月DD日').endOf('month').date();
                if (parseInt(this.selectedDate.lastDay) > last) {
                    this.selectedDate.lastDay = last+'日'
                }
            },
            handleLastDay(value){
                this.selectedDate.lastDay = value
            },
            selectDate() {
                this.selectedDate.date = this.selectedDate.firstYear
                    + this.selectedDate.firstMonth
                    + this.selectedDate.firstDay
                    + '~'
                    + this.selectedDate.lastYear
                    + this.selectedDate.lastMonth
                    + this.selectedDate.lastDay;
                this.selectedDate.date = moment(this.selectedDate.date.split('~')[0], 'YYYY年MM月DD日').format('YYYY-MM-DD')
                + ' ~ ' +
                    moment(this.selectedDate.date.split('~')[1], 'YYYY年MM月DD日').format('YYYY-MM-DD');
                this.$emit('change', this.selectedDate.date);
                this.isActive = false
            },
            getDaysArr(length) {
                let daysArr = [];
                for (let i = 1; i <= length; i++) {
                    let m = '';
                    if (i < 10) {
                        m = '0' + i + '日';
                    } else {
                        m = i + '日'
                    }
                    daysArr.push(m);
                }
                return daysArr;
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/scss/mixin.scss";

    .time-select {
        position: relative;
        @include fj(flex-start);
        .time-range {
            p{
                color: $blue;
            }
        }
        .ant-input {
            cursor: pointer;
            color: $blue;

            &:read-only {
                border: none;
                background: transparent;
            }

            &:focus {
                border: none;
                -webkit-box-shadow: 0 0 0 0 #fff;
                box-shadow: 0 0 0 0 #fff
            }
        }

        .time-choose-calendar {
            position: absolute;
            z-index: 100;

            & > .arrow {
                margin-left: 35px;
                width: 0;
                height: 0;
                border-width: 0 10px 10px;
                border-style: solid;
                border-color: transparent transparent #394047;
            }

            .content {
                @include wh(700px, 150px);
                background-color: #394047;

                & > .select-content {
                    padding: 30px 15px;
                    @include fj(space-between);
                    align-items: center;
                    & > .ant-select {
                        width: 100px
                    }
                }

                .ant-btn {
                    float: right;
                    right: 30px
                }
            }
        }

        .slide-fade-enter-active {
            transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .slide-fade-leave-active {
            transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .slide-fade-enter, .slide-fade-leave-to {
            transform: translateY(10px);
            opacity: 0;
        }
    }
</style>
